<template>
  <div class="container">
    <h1 class="font-weight-100 text-center">组件市场</h1>
    <div class="content mc flex">
      <nav class="category mc">
        <RouterLink
          class="category-item"
          :class="{ 'item-selected': route.fullPath.includes('/select-group') }"
          to="/materials/select-group"
        >
          <el-icon>
            <CircleCheck />
          </el-icon>
          <div>选择</div>
        </RouterLink>
        <RouterLink
          class="category-item"
          :class="{ 'item-selected': route.fullPath.includes('/input-group') }"
          to="/materials/input-group"
        >
          <el-icon>
            <EditPen />
          </el-icon>
          <div>文本输入</div>
        </RouterLink>
        <RouterLink
          class="category-item"
          :class="{ 'item-selected': route.fullPath.includes('/advanced-group') }"
          to="/materials/advanced-group"
        >
          <el-icon>
            <Files />
          </el-icon>
          <div>高级题型</div>
        </RouterLink>
        <RouterLink
          class="category-item"
          :class="{ 'item-selected': route.fullPath.includes('/note-group') }"
          to="/materials/note-group"
        >
          <el-icon>
            <ChatLineSquare />
          </el-icon>
          <div>备注说明</div>
        </RouterLink>
        <RouterLink
          class="category-item"
          :class="{ 'item-selected': route.fullPath.includes('/personal-info-group') }"
          to="/materials/personal-info-group"
        >
          <el-icon>
            <User />
          </el-icon>
          <div>个人信息</div>
        </RouterLink>
        <RouterLink
          class="category-item"
          :class="{ 'item-selected': route.fullPath.includes('/contact-group') }"
          to="/materials/contact-group"
        >
          <el-icon>
            <Message />
          </el-icon>
          <div>联系方式</div>
        </RouterLink>
      </nav>
      <div class="coms">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
// 引入对应图标
import {
  CircleCheck,
  Files,
  EditPen,
  ChatLineSquare,
  User,
  Message,
} from '@element-plus/icons-vue';

const route = useRoute();
</script>

<style lang="scss" scoped>
.container {
  margin-top: 60px;
  padding: 20px;
}
.content {
  width: 1180px;
  height: 600px;
}
.category {
  width: 70px;
  height: 100%;
  > .category-item {
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-base);
    color: var(--white);
    border-top-left-radius: var(--border-radius-lg);
    border-bottom-left-radius: var(--border-radius-lg);
    transition: 0.3s;

    &:hover,
    &.item-selected {
      transform: translateX(-20px);
      width: 90px;
    }
  }
  @for $i from 1 through 4 {
    .category-item:nth-child(4n + #{$i}) {
      @if $i == 1 {
        background-color: var(--primary-color);
      } @else if $i == 2 {
        background-color: var(--success-color);
      } @else if $i == 3 {
        background-color: var(--warning-color);
      } @else if $i == 4 {
        background-color: var(--error-color);
      }
    }
  }
}
.coms {
  width: calc(1180px - 60px);
  height: 100%;
}
</style>
